<template>
  <common-page :title="`${isEdit ? '编辑报告' : '新增报告'}`">
    <el-button slot="header" @click="back">返回</el-button>
    <el-button slot="header" type="primary" @click="handleEditDialog"
      >保存</el-button
    >

    <div class="data-report-table-wrap" slot="content" v-loading="loading">
      <common-config-excel
        ref="ExcelConfig"
        :configuration="configuration"
        v-if="isConfig"
      >
      </common-config-excel>
    </div>

    <common-edit-dialog
      :visible="isEditDialog"
      title="保存"
      :button-loading="isPersistenceLoading"
      @cancel="isEditDialog = false"
      @submit="persistence"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="60px"
        @submit.native.prevent
      >
        <el-form-item label="名称" prop="name">
          <common-input v-model="form.name" :maxlength="16"></common-input>
        </el-form-item>
        <common-add-dept
          ref="commonAddDept"
          :deptListParams="departmentList"
          @getCheckedDeptId="getCheckedDeptId"
          :deptId="form.deptId"
        ></common-add-dept>
        <el-form-item label="描述">
          <common-input
            v-model="form.description"
            type="textarea"
          ></common-input>
        </el-form-item>
      </el-form>
    </common-edit-dialog>
  </common-page>
</template>

<script>
import CommonConfigExcel from "@/components/CommonExcelConfig";
import {
  addReport,
  editReport,
  getReportInfo,
} from "@/api/screenConfig/dataReport";

export default {
  name: "config",
  data() {
    return {
      isEdit: false,
      isEditDialog: false,
      isPersistenceLoading: false,
      form: {
        id: null,
        name: "",
        deptId: "",
        description: "",
        configuration: "",
      },
      configuration: {
        table: [],
      },
      rules: {
        name: [{ required: true, message: "请输入报告名称", trigger: "blur" }],
      },
      hasData: false,
      loading: false,
    };
  },
  props: {
    reportId: {
      type: String,
    },
    departmentList: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    CommonConfigExcel,
  },
  computed: {
    isConfig: function () {
      return (this.isEdit && this.hasData) || !this.isEdit;
    },
  },
  methods: {
    getCheckedDeptId(val) {
      this.form.deptId = val;
    },
    handleEditDialog() {
      let configuration = this.$refs.ExcelConfig.getTableData();
      console.log("配置项: ", configuration);
      this.form.configuration = JSON.stringify(configuration);
      this.isEditDialog = true;
    },
    back() {
      this.$emit("close");
    },
    persistence() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.isPersistenceLoading = true;
          if (this.isEdit) {
            // 编辑
            editReport({ ...this.form, classType: 0 })
              .then((res) => {
                if (res && res.code === 200) {
                  this.$GlobalSuccessMessage("编辑成功");
                  this.back();
                } else {
                  this.$GlobalErrorConfirm("编辑失败", res.msg);
                }
              })
              .finally(() => {
                this.isPersistenceLoading = false;
              });
          } else {
            // 新增
            addReport({ ...this.form, classType: 0 })
              .then((res) => {
                if (res && res.code === 200) {
                  this.$GlobalSuccessMessage("新增成功");
                  this.back();
                } else {
                  this.$GlobalErrorConfirm("新增失败", res.msg);
                }
              })
              .finally(() => {
                this.isPersistenceLoading = false;
              });
          }
        }
      });
    },
    getInfo() {
      this.loading = true;
      getReportInfo({ id: this.form.id, classType: 0 })
        .then((res) => {
          if (res && res.code === 200) {
            this.form.name = res.data.name;
            this.form.deptId = res.data.deptId;
            this.form.description = res.data.description;
            this.form.configuration = res.data.configuration;

            try {
              this.configuration = JSON.parse(res.data.configuration);
            } catch (e) {
              console.log("表格配置项数据装换异常: ", e);
              this.configuration = {
                table: [],
              };
            }
            this.hasData = true;
          } else {
          }
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false;
        });
    },
  },
  mounted() {
    if (this.isEdit) {
      this.getInfo();
    }
  },
  created() {
    this.isEdit = !!this.reportId;
    this.form.id = this.reportId;
  },
};
</script>

<style scoped lang="scss">
.data-report-table-wrap {
  width: 100%;
  height: 100%;
}
</style>
